<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
%>
<html>
	 <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="format-detection" content="telephone=no">
        <meta charset="UTF-8">

        <meta name="description" content="Violate Responsive Admin Template">
        <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">

        <title>萌校商城后台</title>
        <script src="<%=path %>/assets2/js/jquery-1.11.1.min.js"></script>
        <script src="<%=path %>/assets2/js/bootstrap.min.js"></script>
        <link href="<%=path %>/assets2/js/sweetalert/sweetalert.css" rel="stylesheet">
   		<script src="<%=path %>/assets2/js/sweetalert/sweetalert-dev.js"></script>
   		<script src="<%=path %>/assets2/js/sweetalert/sweetalert.min.js"></script>    
   		<script src="<%=path %>/assets2/js/validation/validate.min.js"></script>
        <script src="<%=path %>/assets2/js/validation/validationEngine.min.js"></script>
        <script src="<%=path %>/assets2/js/validation/messages_zh.min.js"></script>
        <script src="<%=path %>/assets2/js/jquery.form.js"></script>
        <!-- CSS -->
        <link href="<%=path %>/assets2/css/bootstrap.min.css" rel="stylesheet">
		<link href="<%=path %>/assets2/css/styles.css" rel="stylesheet">
    </head>
    <body>
	<div class="panel panel-default">
		<div class="panel-heading text-center">申请开通店铺</div>
		<div class="panel-body">
			<form role="form" class="form-validation" id="fm" action="<%=path%>/web/shopApply" method="post" enctype="multipart/form-data">
				<div class="row">
					<div class="col-md-6">
						<h4 class="page-title">店铺信息</h4>
						<div class="row">
							<div class="col-md-6 form-group">
								<label>店铺名称</label> <input type="text"
									class="input-sm validate[required] form-control"
									name="merchantName">
							</div>
							<div class="col-md-6 form-group">
								<label>店铺类型</label> <select name="merchartClassifyId"
									id="merchartClassifyId"
									class="form-control input-sm validate[required]">
									<option value="">请选择</option>
								</select>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 form-group">
								<label>店铺地址</label> <input type="text"
									class="input-sm validate[required] form-control"
									name="merchantAddress">
							</div>
						</div>
						<div class="row">
							<div class="col-md-12 form-group">
								<label>店铺简介</label>
								<textarea class="input-sm form-control validate[required]"
									name="merchartIntro"></textarea>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<h4 class="page-title">个人信息</h4>
						<div class="row">
							<div class="col-md-6 form-group">
								<label>姓名</label> <input type="text"
									class="input-sm validate[required] form-control"
									name="userName">
							</div>
							<div class="col-md-6 form-group">
								<label>身份证号</label> <input type="text"
									class="input-sm validate[required,custom[certificateCode]] form-control"
									name="idNo">
							</div>
						</div>
						<div class="row">
							<div class="col-md-6 form-group">
								<label>手持身份证照片</label>
								<div class="row" id="certificatePhotoDiv">
									<input type="file" name="certificatePhoto"
										id="certificatePhoto" style="display: none;">
									<div class="col-xs-6 col-md-4" id="addCertificatePhotoDiv">
										<img class="img-thumbnail"
											src="<%=path%>/assets2/img/tianjia.png"
											onclick="addCertificatePhoto()">
									</div>
								</div>
							</div>
							<div class="col-md-6 form-group">
								<label>手持营业执照</label>
								<div class="row" id="businessPhotoDiv">
									<input type="file" name="businessPhoto" id="businessPhoto"
										style="display: none;">
									<div class="col-xs-6 col-md-4" id="addBusinessPhotoDiv">
										<img class="img-thumbnail"
											src="<%=path%>/assets2/img/tianjia.png"
											onclick="addBusinessPhoto()">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="form-group text-center">
					<br> <br>
					<button class="btn btn-lg btn-primary" id="subBtn" onclick="sub()" type="button">申请开通</button>
				</div>
			</form>
		</div>
	</div>
</body>
   <script type="text/javascript">
   (function(){
		if($("[class*='form-validation']")[0]) {
		    $("[class*='form-validation']").validationEngine();
		    $('body').on('click', '.validation-clear', function(e){
			e.preventDefault();
			$(this).closest('form').validationEngine('hide');
		    });
		}
	})();
   $(function(){
		$.ajax({
			 type:"POST",
	         url: "<%=path %>/web/getShopClassifyList",
	         success: function(data,status,xhr){
	        	 for(var i=0;i<data.length;i++){
	        		 $("#merchartClassifyId").append("<option value='"+data[i].classifyId+"'>"+data[i].classifyName+"</option>");
	        	 }
	         }
		})
		$('#subBtn').bind('click',function(){
			sub();
    	})
   })
   $('#certificatePhoto').on('change',function(){
		var fileName=this.value;
		while (fileName.indexOf("\\") != -1)
		{
			fileName = fileName.slice(fileName.indexOf("\\") + 1);
		}
		var ext = fileName.slice(fileName.indexOf(".")).toLowerCase();
		if(ext.indexOf("png") == -1 && ext.indexOf("jpg") == -1)
		{
			  swal({ 
				title: "操作失败", 
				text: "商品图片格式仅支持PNG、JPG", 
				type: "error",
			  });
			  return false;
		}
		var objUrl = getObjectURL(this.files[0]);
		$('#certificatePhotoDiv').append('<div class="col-xs-6 col-md-4" id="addCertificatePhotoDiv"><img class="img-responsive" src="'+objUrl+'" style="position:relative">'
			+'<img src="<%=path %>/assets2/img/shanchu.png" onclick="delCertificatePhoto()" style="width: 20px;height: 20px;cursor: pointer;position:absolute;right:10px;top:5px"'
			+' onmouseout="$(this).css(\'width\', $(this).width()-5);$(this).css(\'height\', $(this).height()-5)" onmouseover="$(this).css(\'width\', $(this).width()+5);$(this).css(\'height\', $(this).height()+5)"></div>');
		$('#addCertificatePhotoDiv').remove();
   })
   $('#businessPhoto').on('change',function(){
		var fileName=this.value;
		while (fileName.indexOf("\\") != -1)
		{
			fileName = fileName.slice(fileName.indexOf("\\") + 1);
		}
		var ext = fileName.slice(fileName.indexOf(".")).toLowerCase();
		if(ext.indexOf("png") == -1 && ext.indexOf("jpg") == -1)
		{
			  swal({ 
				title: "操作失败", 
				text: "商品图片格式仅支持PNG、JPG", 
				type: "error",
			  });
			  return false;
		}
		var objUrl = getObjectURL(this.files[0]);
		$('#businessPhotoDiv').append('<div class="col-xs-6 col-md-4" id="addBusinessPhotoDiv"><img class="img-responsive" src="'+objUrl+'" style="position:relative">'
			+'<img src="<%=path %>/assets2/img/shanchu.png" onclick="delBusinessPhoto()" style="width: 20px;height: 20px;cursor: pointer;position:absolute;right:10px;top:5px"'
			+' onmouseout="$(this).css(\'width\', $(this).width()-5);$(this).css(\'height\', $(this).height()-5)" onmouseover="$(this).css(\'width\', $(this).width()+5);$(this).css(\'height\', $(this).height()+5)"></div>');
		$('#addBusinessPhotoDiv').remove();
   })
   function addCertificatePhoto(){
		$('#certificatePhoto').click();
   }
   function delCertificatePhoto(){
		$('#certificatePhoto').val('');
		$('#addCertificatePhotoDiv').remove();
		$('#certificatePhotoDiv').append('<div class="col-xs-6 col-md-4" id="addCertificatePhotoDiv"><img class="img-thumbnail" src="<%=path %>/assets2/img/tianjia.png" onclick="addCertificatePhoto()"></div>');  
   }
   function addBusinessPhoto(){
		$('#businessPhoto').click();
   }
   function delBusinessPhoto(){
		$('#businessPhoto').val('');
		$('#addBusinessPhotoDiv').remove();
		$('#businessPhotoDiv').append('<div class="col-xs-6 col-md-4" id="addCertificatePhotoDiv"><img class="img-thumbnail" src="<%=path %>/assets2/img/tianjia.png" onclick="addCertificatePhoto()"></div>');  
  }
   
  function sub(){
	  if($("#fm").validationEngine("validate")){
		  if($('#certificatePhoto').val()==null||$('#certificatePhoto').val()==''){
				swal({ 
					  title: "操作失败", 
					  text: "手持身份证照片不能为空", 
					  type: "error",
					});
				return false;
			}  
		  if($('#businessPhoto').val()==null||$('#businessPhoto').val()==''){
				swal({ 
					  title: "操作失败", 
					  text: "手持营业执照不能为空", 
					  type: "error",
					});
				return false;
			}
		  $('#fm').ajaxSubmit({
				beforeSubmit:function(){
					$("#subBtn").unbind("click");
				},success:function(data) { 
				if(data.state==1){
					swal({ 
						  title: "操作成功", 
						  text: "店铺申请成功", 
						  type: "success",
						},
						function(){
							window.location.href="<%=path %>/jsp/web/waitApplyMerchant.jsp";
						});
				}else if(data.state==2){
					swal({ 
						  title: "操作失败", 
						  text: data.msg, 
						  type: "error",
						},function(){
							$('#subBtn').on("click",function(){
								sub();
							})
						});
				}else{
					swal({ 
						  title: "操作失败", 
						  text: "店铺申请失败", 
						  type: "error",
						},function(){
							$('#subBtn').on("click",function(){
								sub();
							})
						});
				}
				}
			})
	  }
  }
  
 	//建立一個可存取到該file的url  
	function getObjectURL(file) {  
	  var url = null ;   
	  // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已  
	  if (window.createObjectURL!=undefined) { // basic  
	    url = window.createObjectURL(file) ;  
	  } else if (window.URL!=undefined) { // mozilla(firefox)  
	    url = window.URL.createObjectURL(file) ;  
	  } else if (window.webkitURL!=undefined) { // webkit or chrome  
	    url = window.webkitURL.createObjectURL(file) ;  
	  }  
	  return url ;  
	}  
   </script>
</html>